<template>
  <div class="my-2">
    <div ref="gridRef" class="border-t text-gray-950">
      <div class="border-l border-b border-r px-2">
        <div class="text-center font-bold" style="font-size: 30px;">备料计划</div>
        <div class="flex mt-2 mb-1">
          <div class="ml-auto w-1/4">合同编号: {{ form.value.contract_no }}</div>
        </div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">甲方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.company_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.company_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">乙方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.supplier_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.supplier_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">联系人</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.purchase_user" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.purchase_user }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">联系人</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.contract_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.contract_name }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">电话</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.purchase_user_phone" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.purchase_user_phone }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">电话</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.phone" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.phone }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">地址</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.address" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.address }}</div>
        </div>
        <div class="col-span-4 border-b border-r p-2  flex items-center justify-center">地址</div>
        <div class="col-span-12 border-b border-r p-2">
          <el-input v-if="edit" v-model="form.value.company_address" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.company_address }}</div>
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">SKU</div>
        <div class="col-span-7 border-b border-r p-2  flex items-center justify-center">产品名称</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">图片</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">数量</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">单价</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">总额</div>
        <div class="col-span-5 border-b border-r p-2  flex items-center justify-center">工厂确认出货时间</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">国家</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">备注</div>
      </div>
      <div v-for="(d, i) in form.value.plan_info" :key="i" class="grid border-l"
        style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ d.sku }}</div>
        <div class="col-span-7 border-b border-r p-2  flex items-center justify-center">{{ d.sku_name }}</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">
          <a :href="d.main_img" target="_blank">
            <img :src="d.main_img || ''" style="max-width: 80px;max-height: 80px;" @load="imgLoad" @error="imgLoad" />
          </a>
        </div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ d.plan_num }}</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ d.unit_price }}</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ d.total_price }}</div>
        <div class="col-span-5 border-b border-r p-2  flex items-center justify-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ d.pre_delivery_time }}</div>
          <el-date-picker v-else v-model="d.pre_delivery_time" placeholder="日期选择" type="date" value-format="YYYY-MM-DD" class="w-full" />
          </div>
        <div class="col-span-2 border-b border-r p-2  flex items-center justify-center">{{ d.country }}</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ d.remark }}&nbsp;</div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="border-b border-r p-2  flex items-center justify-center" style="grid-column: span 23 / span 23;">合计金额
        </div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ form.value.total_money }}</div>
        <div class="col-span-6 border-b border-r p-2  flex items-center justify-center">{{ form.value.cn_total_money }}
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">备料总金额</div>
        <div class="col-span-3 border-b border-r p-2  flex items-center justify-center">{{ form.value.total_money }}</div>
        <div class="border-b border-r p-2  flex items-center justify-center" style="grid-column: span 26 / span 26;">
          {{ form.value.cn_total_money }}</div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-full border-b border-r p-2 flex items-center justify-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.remark }}</div>
          <el-input v-else v-model="form.remark" placeholder="说明" type="textarea" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(32, minmax(0, 1fr))">
        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">甲方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>

        <div class="col-span-4 border-b border-r p-2 flex items-center justify-center">乙方信息</div>
        <div class="col-span-12 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  isLook: Boolean,
  edit: Boolean,
})
const emit = defineEmits(['update:modelValue', 'load'])
const form = computed({
  get() {
    return props.modelValue || {}
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const num = ref(0)
const gridRef = ref()
const imgLoad = () => {
  num.value++
  const { plan_info } = form.value.value
  if (plan_info.length === num.value) {
    const nodes = Array.from(gridRef?.value.childNodes).filter(d => d.nodeType === 1)
    let heights = 0
    nodes.forEach(d => {
      const { height } = d.getBoundingClientRect()
      heights += height
      if (heights > 1720) {
        d.style.marginTop = 1720 - (heights - height) + 30 + 'px'
        d.style.borderTopWidth = '1px'
        heights = height
      }
    })
    !props.edit && emit('load')
    return
  }
}
</script>